<template>
    <div class="bindVerify">
        <assets-head :title="title" />
        <div class="content">
            <!-- 手机邮箱验证 -->
            <div v-if="type == 1 || type == 2">
                <ExInput :label="type == 2 ? $t('邮箱') : $t('手机号')"
                    :placeholderText="type == 2 ? $t('请输入您的邮箱') : $t('请输入您的手机号码')" v-model.trim="account" :area="isArea"
                    @selectArea="onSelectArea" :dialCode="dialCode" :icon="icon" />
                <p class="label mt-14 textColor">{{ $t('验证码') }}</p>
                <div class="iptbox inputBackground">
                    <input class="inputBackground textColor" type="text" :placeholder="$t('请输入验证码')" v-model="verifyCode">
                    <span v-if="type != 3" @click="senCode">{{ $t('发送验证码') }}<template v-if="time">
                            ({{ time }})s</template></span>
                </div>
            </div>
            <!-- 谷歌验证 -->
            <div v-if="type == 3">
                <div class="pl-30 pr-30 text-center flex flex-col items-center justify-center mt40">
                    <div class="imgbox">
                        <img :src="google_auth_url" alt="" class="QRcodeImg" />
                    </div>
                    <div class="code flex items-center justify-center textColor">{{ google_auth_secret }}
                        <img src="@/assets/image/reload.png" alt="" @click="getGoogleauth" />
                    </div>
                    <p class="tips">{{ $t('(请妥善备份密钥以防丢失)') }}</p>
                    <div class="copy textColor" @click="copy">{{ $t('复制') }}</div>
                </div>
                <div class="flex justify-between mt-48 mb-20 textColor">
                    <div>{{ $t('谷歌验证码') }}</div>
                    <div class="flex items-center">
                        <div class="textColor4" @click="value = ''">{{ $t('清除') }}</div>
                        <div class="textColor4 ml-30" @click="pastCont">{{ $t('粘贴') }}</div>
                    </div>
                </div>
                <van-password-input :value="value" :gutter="16" :focused="showKeyboard" @focus="showKeyboard = true"
                    :mask="false" />
                <van-number-keyboard v-model="value" :show="showKeyboard" @blur="showKeyboard = false" />
                <div class="mt-20"></div>
                <div class="mt-44 bottom tabBackground textColor">
                    <p>{{ $t('注意事项') }}</p>
                    <p>{{ $t('1.下载Google身份验证器APP') }}</p>
                    <p>{{ $t('2.扫描上图二维码输入验证码完成绑定') }}</p>
                </div>
            </div>
            <div class="btn btnMain" @click="submit">{{ $t('确认') }}</div>
        </div>
        <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)">
        </nationality-list>
    </div>
</template>

<script>
import assetsHead from "@/components/assets-head";
import ExInput from "@/components/ex-input";
import ApiLogin from "@/API/login.js";
import Axios from "@/API/userCenter.js";
import nationalityList from '@/page/authentication/components/nationalityList.vue'
import { PasswordInput, NumberKeyboard } from 'vant';
    export default {
        props: {

        },
        components: {
            nationalityList,
            assetsHead,
            ExInput,
            [PasswordInput.name]: PasswordInput,
            [NumberKeyboard.name]: NumberKeyboard,
        },
        data(){
            return {
                title:'',
                account:'',
                isArea: false,
                type: 0,
                verifyCode:'',
                google_auth_secret: 'PSDJKL2LKLLAJNGJ',
                showKeyboard: false,
                value: '', //谷歌验证码code
                imgshow: true,
                google_auth_url: '',
                dialCode: 0, //电话号前缀
                timer: '',
                time: 0,
                icon:''
            }
        },
        mounted(){
            this.init();
            clearInterval(this.timer)
        },
        methods: {
            init(){
                let type = this.$route.query.type;
                this.type = type;
                if(type == 1){
                    this.title =this.$t("手机号绑定");
                    this.isArea = true
                } else if (type == 2){
                    this.title = this.$t("邮箱认证");
                } else if (type == 3) {
                    this.title = this.$t("Google验证器");
                    this.getGoogleauth()
                }
            },
            senCode() {
                if (this.type == 2 && this.account == ''){
                    this.$toast(this.$t('请输入邮箱'));
                    return
                }
                if (this.type == 1 && this.account == '') {
                    this.$toast(this.$t('请输入手机号'));
                    return
                }
                if (this.time > 0) {
                    return false
                }
                ApiLogin.sendVerifyCode({
                    target: this.type == 1 ? `${this.dialCode}${this.account}`:this.account,
                }).then((res) => {
                    this.$toast(this.$t('发送成功'));
                    this.time = 30;
                    this.timer = setInterval(() => {
                        if (this.time > 0) {
                            this.time = this.time - 1
                        } else {
                            this.time = 0;
                            clearInterval(this.timer)
                        }
                    }, 1000);
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}                  
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}    
                });
            },
            submit(){
                if (this.type == 2 && this.account == '') {
                    this.$toast(this.$t('请输入邮箱'));
                    return
                }
                if (this.type == 1 && this.account == '') {
                    this.$toast(this.$t('请输入手机号'));
                    return
                }
                if (this.type == 1){
                    this.bindPhone()
                } else if (this.type == 2){
                    this.bindEmail()
                } else if (this.type == 3){
                    this.bindGoogleauth()
                }
            },
            bindEmail(){
                Axios.bindEmail({
                    email: this.account,
                    verifcode: this.verifyCode
                }).then((res) => {
                    this.$toast(this.$t('绑定成功'));
                    this.$router.push('/safety')
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}                
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}          
                });
            },
            bindPhone(){
                Axios.bindPhone({
                    phone: `${this.dialCode}${this.account}`,
                    verifcode: this.verifyCode
                }).then((res) => {
                    this.$toast(this.$t('绑定成功'));
                    this.$router.push('/safety')
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}            
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}           
                });
            },
            getGoogleauth(){
                Axios.getGoogleauth({
                }).then((res) => {
                    this.google_auth_secret = res.data.google_auth_secret;
                    this.google_auth_url = res.data.google_auth_url
                   console.log(res)
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}               
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}    
                });
            },
            bindGoogleauth() {
                if (this.value.length < 6) {
                    this.$toast(this.$t('请输入验证码'));
                    return false
                }
                Axios.bindGoogleauth({
                    secret: this.google_auth_secret,
                    code: this.value
                }).then((res) => {
                    let google_auth_bind = res.data.google_auth_bind;
                    if (google_auth_bind){
                    this.$store.commit('user/SET_USERINFO', { googleverif: true })
                        this.$toast(this.$t('绑定成功'));
                        this.$router.push('/safety')
                    }else{
                        this.$toast(this.$t('绑定失败'));
                    }
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}       
                });
            },
            copy() {
                this.$copyText(this.google_auth_secret).then(message => {
                    this.$toast(this.$t('复制成功'));
                }).catch(err => {

                })
            },
            async pastCont() {
                this.value = await navigator.clipboard.readText();
            },
            getName(params) {
                this.icon = params[1];
                this.dialCode = params[2];
                console.log(params[2])
            },
            onSelectArea() {
                this.openBtn();
            },
            //打开国家列表底部弹窗
            openBtn() {
                this.$refs.controlChild.open();
            },
        },
        beforeDestroy() {
            clearInterval(this.timer)
        },
        watch: {
            value(value) {
                if (value.length === 6) {
                    this.showKeyboard = false
                } else {

                }
            },
        },
    }
</script>

<style lang="scss" scoped>
.bindVerify {
    width: 100%;
    box-sizing: border-box;
}





.content {
    font-size: 24px;
    padding: 0 32px;
}

.iptbox {
    height: 88px;
    margin-top: 16px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 6px;

    input {
        flex: 1;
        height: 100%;
        border: none;
    }

    span {
        color: #1D91FF;
    }
}
.btn {
    color: #000;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 32px;
    margin-top: 40px;
    border-radius: 10px;
}

.imgbox {
    border: 1px solid $line_color;
    padding: 30px;
    width: 364px;
    height: 364px;
    box-sizing: border-box;

    img {
        width: 100%;
        height: 100%;
    }
}

.code {
    font-size: 30px;
    font-weight: 300;
    line-height: 36px;
    margin-top: 44px;
    height: 36px;

    img {
        width: 26px;
        height: 26px;
        margin-left: 10px;
    }
}

.tips {
    margin-top: 20px;
    color: #999999;
}

.copy {
    border-radius: 8px;
    width: 264px;
    height: 80px;
    margin-top: 32px;
    border: 2px solid $line_color;
    line-height: 80px;
}

.bottom {
    padding: 40px 32px 14px 32px;

    p {
        padding-bottom: 26px;
    }
}

.van-password-input {
    margin: 0;
}


.van-password-input__security li {
    background: $tab_background;
    width: 100px;
    height: 100px;
    color: $text_color;
}
</style>
